<template>
  <div>
    <button id="open-modal" @click="openModal">打开弹窗</button>
    <dragScaleDialog 
      :title="modalTitle" 
      :is-open="modalIsOpen" 
      :size="modalSize" 
      @close="closeModal"
      @change="handleModalChange">
      <ul class="chatUI">
        <li v-for="(item, index) in titles" :key="item.id" :class="index % 2 != 0 ? 'left' : 'right'">
          {{ item.name }}
        </li>
      </ul>
    </dragScaleDialog>
  </div>
</template>

<script>
import dragScaleDialog from './dragScaleDialog.vue';
export default {
  name: '',
  props: {},
  components: { dragScaleDialog },
  data() {
    return {
      titles: [],
      modalTitle: '我的弹窗',
      modalIsOpen: false,
      // modalPosition: { left: 0, bottom: 0 },
      // modalSize: { width: 540, height: 740 },
    };
  },
  computed: {},
  watch: {},
  methods: {
    openModal(){
      this.modalIsOpen = true;
    },
    closeModal() {
      this.modalIsOpen = false;
    },
    handleModalChange({ position, size, isOpen }) {
      console.log('弹窗状态变更:', { position, size, isOpen });
    },
  },
  beforeCreate() { },
  created() { },
  beforeMount() { },
  mounted() {
    for (let i = 0; i < 100; i++) {
      this.titles.push({
        id: i,
        name:
          '标题' +
          i +
          new Date().getTime() +
          new Date().getTime() +
          new Date().getTime() +
          new Date().getTime(),
      });
    }
  },
  beforeUpdate() { },
  updated() { },
  activated() { },
  deactivated() { },
  beforeDestroy() { },
  destroyed() { },
};
</script>

<style lang="scss" scoped>
.chatUI {
  // display: flow-root;
  width: 100%;
  height: auto;
  box-sizing: border-box;

  li {
    width: 90%;
    height: auto;
    box-sizing: border-box;
    margin-bottom: 10px;
    background-color: #ddd;
    border-radius: 4px;
    padding: 8px;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .right {
    float: right;
  }

  .left {
    float: left;
  }
}

.chatUI::after {
  content: ' ';
  display: table;
  clear: both;
}

#open-modal {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

#open-modal:hover {
  background-color: #2980b9;
}
</style>
